import React, {useCallback, useEffect, useState} from "react"
import {observerDashboardPageWrapper} from "./ObserverDashboardPageWrapper";
import {getOrderDetail, OrderResponse} from "../../apis/OrderApi";
import dashboardPageStore from "../../store/DashboardPageStore";
import {Button, Descriptions, Divider, Image, Space} from "antd";
import {YEAR_MONTH_DAY_FORMATER} from "../../utils/Date";
import {QINIU_IMAGE_HOST} from "../../utils/UploadUtils";
import {EditOutlined} from "@ant-design/icons";
import FormDrawer from "../FormDrawer";

export interface OrderDetailPageProps {
    id: number
}

const OrderDetailPage: React.FC<OrderDetailPageProps> = ({id}) => {
    const [loading, setLoading] = useState(false)
    const [detail, setDetail] = useState<OrderResponse>()
    const query = useCallback(() => {
        setLoading(true)
        getOrderDetail(id).then((response) => {
            dashboardPageStore.setTitle(myPath.replace("{id}", id.toString()), response.data.name + "订单")
            setDetail(response.data)
        }).finally(() => {
            setLoading(false)
        })
    }, [id])
    useEffect(() => {
        query()
    }, [query]);
    
    const [updateOrderDrawerVisible,setUpdateOrderDrawerVisible] = useState(false)
    return (
        <>
            {
                loading ? <></>
                    : <>
                        <Space direction={"vertical"}>
                            <div style={{display:"flex",
                            justifyContent:"end"}}>
                                <Button type={"primary"} icon={<EditOutlined/>}>编辑</Button>
                            </div>
                            <Descriptions title={"用户信息"}>
                                <Descriptions.Item label={"姓名"}>{detail?.name}</Descriptions.Item>
                                <Descriptions.Item label={"身份证号"}>{detail?.idCard}</Descriptions.Item>
                                <Descriptions.Item label={"手机号"}>{detail?.phoneNumber}</Descriptions.Item>
                                <Descriptions.Item label={"地址"}>{detail?.address}</Descriptions.Item>
                            </Descriptions>
                            <Descriptions title={"商品信息"}>
                                <Descriptions.Item label={"品牌"}>{detail?.brand}</Descriptions.Item>
                                <Descriptions.Item label={"型号"}>{detail?.model}</Descriptions.Item>
                                <Descriptions.Item label={"序列号"}>{detail?.serialNumber}</Descriptions.Item>
                                {detail?.isHomeAppliance ? <Descriptions.Item
                                        label={"能效等级"}>{detail?.energyEfficiencyLevel}</Descriptions.Item>
                                    : <></>}
                                <Descriptions.Item label={"条码（69码）"}>{detail?.barcode}</Descriptions.Item>
                            </Descriptions>
                            <Descriptions title={"付款与送达"}>
                                <Descriptions.Item label={"支付金额"}>{detail?.paymentFee}</Descriptions.Item>
                                <Descriptions.Item label={"国补金额"}>{detail?.governmentSubsidies}</Descriptions.Item>
                                <Descriptions.Item label={"小票号码"}>{detail?.invoiceNumber}</Descriptions.Item>
                                <Descriptions.Item label={"银联订单号"}>{detail?.unionPayOrderNumber}</Descriptions.Item>
                                <Descriptions.Item
                                    label={"送达时间"}>{detail?.deliveryDateTime?.format(YEAR_MONTH_DAY_FORMATER)}</Descriptions.Item>
                            </Descriptions>
                            { <>
                                <Divider orientation={"left"}>身份证</Divider>
                                {(detail?.idCardFrontPicture || detail?.idCardBackPicture) ? <Image.PreviewGroup>
                                    {[detail!.idCardFrontPicture, detail!.idCardBackPicture].filter(it => !!it).map(it => it!!).map(it => {
                                        return <Image src={`${QINIU_IMAGE_HOST}${it}`} width={200}></Image>
                                    })}
                                </Image.PreviewGroup> : <>无</>}
                            </> }

                            { <>
                                <Divider orientation={"left"}>小票</Divider>
                                {(detail?.invoicePicture || detail?.unionPayInvoicePicture) ? <Image.PreviewGroup>
                                    {[detail!.invoicePicture, detail!.unionPayInvoicePicture].filter(it => !!it).map(it => it!!).map(it => {
                                        return <Image src={`${QINIU_IMAGE_HOST}${it}`} width={200}></Image>
                                    })}
                                </Image.PreviewGroup> : <>无</>}
                            </> }

                            {<>
                                <Divider orientation={"left"}>产品照片</Divider>
                                {detail?.productImagePictures?.length ?<Image.PreviewGroup>
                                    {detail.productImagePictures.filter(it => !!it).map(it => it!!).map(it => {
                                        return <Image src={`${QINIU_IMAGE_HOST}${it}`} width={200}></Image>
                                    })}
                                </Image.PreviewGroup>: <>无</>}
                            </> }
                        </Space>

                    </>
            }

            <FormDrawer open={} title={} onClose={} onConfirm={}></FormDrawer>
        </>
    )

}

let myPath = "orders/{id}";
export default observerDashboardPageWrapper(OrderDetailPage, myPath, "$END$")
